<template>
  <div class="box">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="账单汇总" name="first">
        <el-tabs v-model="listName">
          <el-tab-pane label="网点" name="first">
            <el-row>
              <el-col :span="24">
                <div class="header">
                  <el-form
                    ref="wdform"
                    :model="wdform"
                    label-width="100px"
                    class="flex-start"
                  >
                    <el-form-item label="汇总维度">
                      <el-select
                        v-model="wdform.collectType"
                        placeholder="请选择汇总维度"
                        @change="handleDimensionalityChange"
                        style="width: 286px"
                      >
                        <el-option label="月汇总" value="2"></el-option>
                        <el-option label="日汇总" value="1"></el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="下账时间">
                      <el-date-picker
                        v-model="month"
                        type="monthrange"
                        placeholder="选择月"
                        range-separator="至"
                        v-show="show == 2"
                        @change="wdmonthChange"
                        style="width: 672px"
                        start-placeholder="开始月份"
                        end-placeholder="结束月份"
                      >
                      </el-date-picker>

                      <el-date-picker
                        v-model="Time"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="wddateChange"
                        v-show="show == 1"
                        style="width: 672px"
                      >
                      </el-date-picker>

                      <!-- <el-date-picker value-format="yyyy-MM-dd" v-model="Time" type="datetimerange"
                                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                            @change="dateChange" style="width:451px">
                                        </el-date-picker> -->
                    </el-form-item>
                    <el-form-item label="渠道分类">
                      <el-select
                        v-model="wdform.channelType"
                        placeholder="请选择渠道分类"
                        style="width: 286px"
                      >
                        <el-option
                          label="自有渠道"
                          value="自有渠道"
                        ></el-option>
                        <el-option
                          label="三方渠道"
                          value="三方渠道"
                        ></el-option>
                        <el-option
                          label="小件员渠道"
                          value="小件员渠道"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="getWdTableList"
                        >查询</el-button
                      >
                      <el-button @click="wdClear">重置</el-button>
                    </el-form-item>
                    <el-form-item label="订单来源">
                      <el-select
                        v-model="wdform.orderSourceId"
                        placeholder="请选择订单来源"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in OrderSourceList"
                          :key="item.id"
                          :label="item.orderSource"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="所属网点">
                      <el-select
                        v-model="wdform.networkNameId"
                        placeholder="请选择所属网点"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in networkList"
                          :key="item.id"
                          :label="item.networkName"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div>
                  <el-table
                    :data="wdTableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    :cell-style="{ textAlign: 'center' }"
                    :header-cell-style="{ textAlign: 'center' }"
                  >
                    <el-table-column label="序号" width="120" type="index">
                    </el-table-column>
                    <el-table-column
                      prop="orderTime"
                      label="下账时间"
                      width="300"
                    >
                    </el-table-column>
                    <el-table-column prop="address" label="配置名称">
                    </el-table-column>
                    <el-table-column
                      prop="networkCollect"
                      label="收件网点分润/元"
                    >
                    </el-table-column>

                    <el-table-column
                      prop="salesmanCollect"
                      label="业务员分润/元"
                    >
                    </el-table-column>
                    <el-table-column prop="totalTicket" label="总票数">
                    </el-table-column>
                    <el-table-column prop="totalWeight" label="总重量/kg">
                    </el-table-column>
                    <el-table-column prop="channelType" label="渠道分类">
                    </el-table-column>
                    <el-table-column prop="orderSource" label="订单来源">
                    </el-table-column>
                    <el-table-column prop="productType" label="产品类型">
                    </el-table-column>
                    <el-table-column
                      prop="networkName"
                      label="所属网点/承包
区"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="networkCode"
                      label="所属网点/承包
区编码"
                    >
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="业务员" name="second">
            <el-row>
              <el-col :span="24">
                <div class="header">
                  <el-form
                    ref="ywyform"
                    :model="ywyform"
                    label-width="100px"
                    class="flex-start"
                  >
                   <el-form-item label="汇总维度">
                      <el-select
                        v-model="ywyform.collectType"
                        placeholder="请选择汇总维度"
                        @change="handleDimensionalityChange"
                        style="width: 286px"
                      >
                        <el-option label="月汇总" value="2"></el-option>
                        <el-option label="日汇总" value="1"></el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="下账时间">
                      <el-date-picker
                        v-model="month"
                        type="monthrange"
                        placeholder="选择月"
                        range-separator="至"
                        v-show="show == 2"
                        @change="ywymonthChange"
                        style="width: 672px"
                        start-placeholder="开始月份"
                        end-placeholder="结束月份"
                      >
                      </el-date-picker>

                      <el-date-picker
                        v-model="Time"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="ywydateChange"
                        v-show="show == 1"
                        style="width: 672px"
                      >
                      </el-date-picker>

                      <!-- <el-date-picker value-format="yyyy-MM-dd" v-model="Time" type="datetimerange"
                                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                            @change="dateChange" style="width:451px">
                                        </el-date-picker> -->
                    </el-form-item>
                    <el-form-item label="渠道分类">
                      <el-select
                        v-model="ywyform.channelType"
                        placeholder="请选择渠道分类"
                        style="width: 286px"
                      >
                        <el-option
                          label="自有渠道"
                          value="自有渠道"
                        ></el-option>
                        <el-option
                          label="三方渠道"
                          value="三方渠道"
                        ></el-option>
                        <el-option
                          label="小件员渠道"
                          value="小件员渠道"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="getYwyTableList"
                        >查询</el-button
                      >
                      <el-button @click="ywyClear">重置</el-button>
                    </el-form-item>
                    <el-form-item label="订单来源">
                      <el-select
                        v-model="ywyform.orderSourceId"
                        placeholder="请选择订单来源"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in OrderSourceList"
                          :key="item.id"
                          :label="item.orderSource"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="业务员名称" style="margin-left: 10px;">
                           <el-input v-model="ywyform.salesmanName" placeholder="请输入业务员名称"
                                        style="width:286px"></el-input>
                        </el-form-item>
                    <el-form-item label="所属网点">
                      <el-select
                        v-model="ywyform.networkNameId"
                        placeholder="请选择所属网点"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in networkList"
                          :key="item.id"
                          :label="item.networkName"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div>
                  <el-table
                    :data="ywyTableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                  >
                    <el-table-column label="序号" width="120" type="index">
                    </el-table-column>
                    <el-table-column prop="orderTime" label="下账时间" width="300">
                    </el-table-column>
                    <el-table-column
                      prop="salesmanName"
                      label="业务员名称"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="salesmanAccount"
                      label="业务员账号"
                    >
                    </el-table-column>
                    <el-table-column prop="networkProfit" label="收件网点分润/元">
                    </el-table-column>
                    <el-table-column
                      prop="salesmanProfit"
                      label="业务员分润/元"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="totalTicket"
                      label="总票数"
                    >
                    </el-table-column>
                    <el-table-column prop="selletweight" label="总重量/kg" >
                    </el-table-column>
                    <el-table-column prop="channelType" label="渠道分类" >
                    </el-table-column>
                      <el-table-column prop="orderSource" label="订单来源" >
                    </el-table-column>
                      <el-table-column prop="productType" label="产品类型" >
                    </el-table-column>
                      <el-table-column prop="networkName" label="所属网点名称" >
                    </el-table-column>
                      <el-table-column prop="networkCode" label="所属网点编码" >
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
            <div class="block" style="display: flex; justify-content: end">
              <el-pagination
                @size-change="ywyhandleSizeChange"
                @current-change="ywyhandleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="ywytotal"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="账单明细" name="second">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="mxform"
                :model="mxform"
                label-width="100px"
                class="flex-start"
              >
                <el-form-item label="汇总维度">
                  <el-select
                    v-model="mxform.collectType"
                    placeholder="请选择汇总维度"
                    @change="handleDimensionalityChange"
                    style="width: 286px"
                  >
                    <el-option label="月汇总" value="2"></el-option>
                    <el-option label="日汇总" value="1"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="下账时间">
                  <el-date-picker
                    v-model="month"
                    type="monthrange"
                    placeholder="选择月"
                    range-separator="至"
                    v-show="show == 2"
                    @change="mxmonthChange"
                    style="width: 672px"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                  >
                  </el-date-picker>

                  <el-date-picker
                    v-model="Time"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="mxdateChange"
                    v-show="show == 1"
                    style="width: 672px"
                  >
                  </el-date-picker>

                  <!-- <el-date-picker value-format="yyyy-MM-dd" v-model="Time" type="datetimerange"
                                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                            @change="dateChange" style="width:451px">
                                        </el-date-picker> -->
                </el-form-item>
                <el-form-item label="渠道分类">
                  <el-select
                    v-model="mxform.channelType"
                    placeholder="请选择渠道分类"
                    style="width: 286px"
                  >
                    <el-option label="自有渠道" value="自有渠道"></el-option>
                    <el-option label="三方渠道" value="三方渠道"></el-option>
                    <el-option
                      label="小件员渠道"
                      value="小件员渠道"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="mxSearch">查询</el-button>
                  <el-button @click="mxClear">重置</el-button>
                </el-form-item>
                <el-form-item label="订单来源">
                  <el-select
                    v-model="mxform.orderSourceId"
                    placeholder="请选择订单来源"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="item in OrderSourceList"
                      :key="item.id"
                      :label="item.orderSource"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="业务员名称">
                  <el-input
                    v-model="mxform.salesmanName"
                    placeholder="请选择业务员名称"
                    style="width: 286px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="所属网点">
                  <el-select
                    v-model="mxform.networkNameId"
                    placeholder="请选择所属网点"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="item in networkList"
                      :key="item.id"
                      :label="item.networkName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="上级网点">
                  <el-select
                    disabled
                    v-model="mxform.parentNetworkName"
                    placeholder="请选择上级网点"
                    style="width: 286px"
                  >
                    <el-option label="应收下级" value="应收下级"></el-option>
                    <el-option label="应付下级" value="应付下级"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="运单号">
                  <el-input
                    v-model="mxform.transportCode"
                    placeholder="请输入运单号"
                    style="width: 286px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="订单号">
                  <el-input
                    v-model="mxform.orderCode"
                    placeholder="请输入订单号"
                    style="width: 286px"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <el-table
                ref="multipleTable"
                :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ textAlign: 'center' }"
                :data="mxTableData"
                tooltip-effect="dark"
                style="width: 100%"
              >
                <!-- <el-table-column prop="networkName.networkName" label="所属网点" width="120"   fixed>
                                </el-table-column> -->
                <el-table-column
                  prop="orderTime"
                  label="下账时间"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="transportCode"
                  label="运单号"
                  width="120"
                  fixed
                >
                </el-table-column>
                <el-table-column prop="orderCode" label="订单号" width="120">
                </el-table-column>
                <el-table-column
                  prop="networkProfit"
                  label="收件网点分润/元"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="salesmanProfit"
                  label="业务员分润/元"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="salesmanName"
                  label="业务员名称"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="salesmanAccount"
                  label="业务员账号"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="selletWeight"
                  label="结算重量"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="collectTime"
                  label="揽收时间"
                  width="120"
                >
                </el-table-column>
                <el-table-column prop="signTime" label="签收时间" width="120">
                </el-table-column>
                <el-table-column
                  prop="channelType"
                  label="渠道分类"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="networkOrderSource.orderSource"
                  label="订单来源"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="productType"
                  label="产品类型"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="networkName.networkName"
                  label="所屋网点/承包区"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="networkCode"
                  label="所属网点/承包区编码"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="parentNetworkName"
                  label="上级网点名称"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="shareStatus"
                  label="分润状态"
                  width="120"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: end">
          <el-pagination
            @size-change="mxhandleSizeChange"
            @current-change="mxhandleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="mxtotal"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getOutletsList,
  collectBillList,
  collectBillSearch,
  getOrderSourceList,
  billCollectSearch,
  salesmanSearch
} from "@/api/dashboard";

export default {
  data() {
    return {
      activeName: "first",
      listName: "second",
      show: 1,
      //网点列表
      networkList: [],
      // 月份
      month: [],
      value1: "",
      // 明细form
      mxform: {
        collectType: "1",
        startTime: "",
        endTime: "",
        startMonth: "",
        endMonth: "",
        channelType: "",
        networkNameId: "",
        orderSourceId: "",
        salesmanName: "",
        parentNetworkName: "",
        transportCode: "",
        orderCode: "",
      },
      wdform: {
        collectType: "1",
        startTime: "",
        endTime: "",
        startMonth: "",
        endMonth: "",
        channelType: "",
        networkNameId: "",
        orderSourceId: "",
      },
      ywyform: {
        collectType: "1",
        startTime: "",
        endTime: "",
        startMonth: "",
        endMonth: "",
        channelType: "",
        networkNameId: "",
        orderSourceId: "",
        salesmanName:''
      },
      Time: "",
      // 订单来源
      OrderSourceList: [],
      pages: {
        pageNum: 1,
        pageSize: 10,
      },
      // 明细表格
      mxTableData: [],
      total: 0,
      mxtotal: 0,
      mxpages: {
        pageNum: 1,
        pageSize: 10,
      },
      // 网点表格
      wdTableData: [],
      wdtotal: 0,
      wdpages: {
        pageNum: 1,
        pageSize: 10,
      },

      // 业务员表格
      ywyTableData: [],
      ywytotal: 0,
      ywypages: {
        pageNum: 1,
        pageSize: 10,
      },
      currentPage: 1,
      currentPage4: 1,

      tableData: [],
    };
  },
  created() {
    this.getTableList();
    this.getOutLet();
    this.getOrderSource();
    this.getWdTableList();
    this.getYwyTableList();

  },
  mounted() {
    this.getTodayDate();
  },
  methods: {
    // 获取网点列表
    getOutLet() {
      getOutletsList().then((res) => {
        if (res.code == 200) {
          this.networkList = res.data;
        }
      });
    },

    // 获取当前日期
    getTodayDate() {
      // 获取今天的日期
      const today = new Date();
      const startDate = new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate(),
        0,
        0,
        0
      ); // 今天的开始时间
      const endDate = new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate(),
        23,
        59,
        59
      ); // 今天的结束时间

      // 设置时间范围选择器的默认时间范围为今天
      this.Time = [startDate, endDate];
      console.log(this.Time,'this.Time')

      this.mxform.startTime = startDate;
      this.mxform.endTime = endDate;

      this.wdform.startTime = startDate;
      this.wdform.endTime = endDate;

      this.ywyform.startTime = startDate;
      this.ywyform.endTime = endDate;
    },

    // 获取订单来源
    getOrderSource() {
      getOrderSourceList().then((res) => {
        if (res.code == 200) {
          this.OrderSourceList = res.data;
        }
      });
    },
    // 获取揽收明细表格数据
    getTableList() {
      collectBillList(this.mxpages.pageNum, this.mxpages.pageSize).then(
        (res) => {
          if (res.code == 200) {
            this.mxTableData = res.data.data;
            this.mxtotal = res.data.total;
            this.mxpages.pages = res.data.pages;
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        }
      );
    },
    // 获取网点表格数据
    getWdTableList() {
      this.wdTableData = [];
      console.log(this.wdform, " this.wdform");
      for (const key in this.wdform) {
        // Check if the value is empty (assuming empty means falsy in this context)
        if (!this.wdform[key]) {
          // If the value is empty, delete the key from mxForm
          delete this.wdform[key];
        }
      }
      billCollectSearch(this.wdform).then((res) => {
        if (res.code == 200) {
          console.log(res.data);
          this.wdTableData.push(res.data);
          console.log(this.wdTableData, "wdTableData");
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    // 获取业务员表格数据
    getYwyTableList() {
      // this.wdTableData = [];
      for (const key in this.ywyform) {
        // Check if the value is empty (assuming empty means falsy in this context)
        if (!this.ywyform[key]) {
          // If the value is empty, delete the key from mxForm
          delete this.ywyform[key];
        }
      }
      salesmanSearch(this.ywyform).then((res) => {
        if (res.code == 200) {
          this.ywyTableData = res.data.data
          this.ywytotal = res.data.total;
            this.ywytotalpages.pages = res.data.pages;
          console.log(this.ywyTableData, "ywyTableData");
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    // 根据月.日切换时间选择
    handleDimensionalityChange(newVal) {
      console.log(newVal);
      if (newVal == 1) {
        this.show = 1;
        this.mxform.startMonth = "";
        this.mxform.endMonth = "";

        this.wdform.startMonth = "";
        this.wdform.endMonth = "";

        this.ywyform.startMonth = "";
        this.ywyform.endMonth = "";
      } else {
        this.show = 2;

        this.mxform.startTime = "";
        this.mxform.endTime = "";

        this.wdform.startTime = "";
        this.wdform.endTime = "";

        this.ywyform.startTime = "";
        this.ywyform.endTime = "";
      }
    },
    // 明细日期转换
    mxdateChange(value) {
      this.mxform.startTime = value[0];
      this.mxform.endTime = value[1];
    },
    // 网点日期转换
    wddateChange(value) {
      this.wdform.startTime = value[0];
      this.wdform.endTime = value[1];
    },
    // 业务员日期转换
    ywydateChange(value) {
      this.ywyform.startTime = value[0];
      this.ywyform.endTime = value[1];
    },
    // 明细月份转换
    mxmonthChange(value) {
      const [startDateString, endDateString] = value;
      const startDate = new Date(startDateString);
      const endDate = new Date(endDateString);

      // 获取年份和月份
      const startYear = startDate.getFullYear();
      const startMonth = startDate.getMonth() + 1; // 月份是从 0 到 11 表示的，因此需要加 1

      const endYear = endDate.getFullYear();
      const endMonth = endDate.getMonth() + 1; // 月份是从 0 到 11 表示的，因此需要加 1

      // 格式化成 "YYYY-MM" 的形式
      const formattedStartMonth = `${startYear}-${
        (startMonth < 10 ? "0" : "") + startMonth
      }`;
      const formattedEndMonth = `${endYear}-${
        (endMonth < 10 ? "0" : "") + endMonth
      }`;
      this.mxform.startMonth = formattedStartMonth;
      this.mxform.endMonth = formattedEndMonth;
    },

    // 网点月份转换
    wdmonthChange(value) {
      const [startDateString, endDateString] = value;
      const startDate = new Date(startDateString);
      const endDate = new Date(endDateString);

      // 获取年份和月份
      const startYear = startDate.getFullYear();
      const startMonth = startDate.getMonth() + 1; // 月份是从 0 到 11 表示的，因此需要加 1

      const endYear = endDate.getFullYear();
      const endMonth = endDate.getMonth() + 1; // 月份是从 0 到 11 表示的，因此需要加 1

      // 格式化成 "YYYY-MM" 的形式
      const formattedStartMonth = `${startYear}-${
        (startMonth < 10 ? "0" : "") + startMonth
      }`;
      const formattedEndMonth = `${endYear}-${
        (endMonth < 10 ? "0" : "") + endMonth
      }`;
      this.wdform.startMonth = formattedStartMonth;
      this.wdform.endMonth = formattedEndMonth;
    },

    // 业务员月份转换
    ywymonthChange(value) {
      const [startDateString, endDateString] = value;
      const startDate = new Date(startDateString);
      const endDate = new Date(endDateString);

      // 获取年份和月份
      const startYear = startDate.getFullYear();
      const startMonth = startDate.getMonth() + 1; // 月份是从 0 到 11 表示的，因此需要加 1

      const endYear = endDate.getFullYear();
      const endMonth = endDate.getMonth() + 1; // 月份是从 0 到 11 表示的，因此需要加 1

      // 格式化成 "YYYY-MM" 的形式
      const formattedStartMonth = `${startYear}-${
        (startMonth < 10 ? "0" : "") + startMonth
      }`;
      const formattedEndMonth = `${endYear}-${
        (endMonth < 10 ? "0" : "") + endMonth
      }`;
      this.ywyform.startMonth = formattedStartMonth;
      this.ywyform.endMonth = formattedEndMonth;
    },
    // 明细重置
    mxClear() {
      this.mxform = {};
      this.getTableList();
    },
    // 明细重置
    wdClear() {
      this.wdform = {};
      this.getWdTableList();
    },
    // 明细重置
    ywyClear() {
      this.ywyform = {};
      this.getYwyTableList();
    },
    // 明细搜索
    mxSearch() {
      for (const key in this.mxform) {
        // Check if the value is empty (assuming empty means falsy in this context)
        if (!this.mxform[key]) {
          // If the value is empty, delete the key from mxForm
          delete this.mxform[key];
        }
      }
      collectBillSearch(this.mxform).then((res) => {
        if (res.code == 200) {
          this.mxTableData = res.data.data;
          this.mxtotal = res.data.total;
          this.mxpages.pages = res.data.pages;
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    // 切换
    handleClick(tab, event) {
      this.getTodayDate();
      if (tab.name == "second") {
        this.month = "";
      } else {
        this.month = "";
      }
    },
    handClick(tab, event) {
      console.log(tab, event);
    },
    ywyhandleSizeChange(val) {
      this.ywypages.pageSize = val;
      this.getYwyTableList();
      console.log(`每页 ${val} 条`);
    },
    ywyhandleCurrentChange(val) {
      this.ywypages.pageNum = val;
      this.getYwyTableList()
      console.log(`当前页: ${val}`);
    },
    mxhandleSizeChange(val) {
      this.ywypages.pageSize = val;
      this.getTableList();
      console.log(`每页 ${val} 条`);
    },
    mxhandleCurrentChange(val) {
      this.ywypages.pageNum = val;
      this.getTableList()
      console.log(`当前页: ${val}`);
    },
    handleSelectionChange(val) {
      // this.multipleSelection = val;
    },
    wdhandleSizeChange(val) {
      this.pages.pageSize = val;
      this.getTabList();

      console.log(`每页 ${val} 条`);
    },
    wdhandleCurrentChange(val) {
      this.pages.pageNum = val;
      this.getTabList();
      console.log(`当前页: ${val}`);
    },
    wdhandleSelectionChange(val) {
      // this.multipleSelection = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
